<template>
  <div>
    <!-- 筛选 订单状态 -->
    <ContentWrap :show-border="false" :bodyStyle="{ padding: '0 10px' }">
      <OrderStatusMenu :list="orderStatusList" @tab-change="handleOrderStatus" />
    </ContentWrap>
    <ContentWrap :show-border="false">
      <SearchBox
        :queryForm="searchList"
        :showExpland="false"
        :showLen="5"
        @changeVal="handleChange"
        @query="handleSearchQuery"
        @update:exportData="handleExport"
        @clearDefaultTime="clearDefaultTime"
      />
    </ContentWrap>
    <div class="w-full h-[1px]" style="border-bottom: 1px dashed #ddd"></div>
    <ContentWrap :show-border="false">
      <div class="flex items-baseline titbox">
        <div class="text-[16px] text-[#101010] font-semibold mr-[8px] tit">数据概览</div>
        <div class="text-[#999] text-[12px] desc">
          <!-- 数据每2小时更新，当前统计至2023-02-1620:00 -->
          数据每5分钟更新一次
        </div>
        <div class="w-[12px] h-[12px] ml-[4px] cursor-pointer refreshbox" @click="getList">
          <img :src="RefreshPng" class="w-full h-full object-contain" />
        </div>
      </div>
      <div class="mt-[24px] w-full flex info">
        <div
          class="rounded-[10px] bg-[#F6F5FF] w-[220px] py-[14px] px-[16px] shrink-0 total"
          style="border: 1px solid #3721ff"
        >
          <div class="flex items-center title">
            <div
              class="w-[8px] h-[8px] rounded-[50%] circle"
              style="border: 2px solid #3721ff"
            ></div>
            <div class="text-[#3721FF] text-[14px] font-semibold ml-[10px] tit">总广告花费</div>
          </div>
          <div class="pl-[15px] mt-[4px] flex items-baseline money">
            <div class="text-[#101010] font-bold text-[20px] m">
              {{ getIntegerPart(totalInfo?.totalSpend) }}
            </div>
            <div class="text-[#101010] font-bold text-[14px] d">
              .{{ getDecimalPart(totalInfo?.totalSpend) }}
            </div>
            <div
              class="w-[2px] h-[11px] bg-[#101010] mx-[3px] line"
              style="transform: rotate(15deg); transform-origin: center center"
            ></div>
            <div class="text-[#101010] font-bold text-[14px] o">{{ totalInfo?.totalSpendCny }}</div>
          </div>
          <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位$/￥ </div>
        </div>
        <div class="mx-[4px] shrink-0 eq">
          <img :src="EqPng" class="w-full h-full object-contain" />
        </div>
        <div class="scrollbox" ref="scrollboxRef" style="width: calc(100% - 232px)">
          <div
            class="flex cursor-pointer items-center w-full srcollRight"
            @mousedown="startDrag"
            @mouseup="stopDrag"
            @mouseleave="stopDrag"
            @mousemove="doDrag"
            :style="{ transform: `translateX(${translateX}px)` }"
          >
            <div class="flex" ref="scrollRightRef" style="user-select: none">
              <div
                class="rounded-[10px] w-[220px] py-[14px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img03Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#101010] text-[14px] ml-[10px] tit">FB广告消耗</div>
                </div>
                <div class="pl-[15px] mt-[4px] flex items-baseline money">
                  <div class="text-[#101010] font-bold text-[20px] m">{{
                    getIntegerPart(totalInfo?.spend)
                  }}</div>
                  <div class="text-[#101010] font-bold text-[14px] d"
                    >.{{ getDecimalPart(totalInfo?.spend) }}</div
                  >
                </div>
                <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位$ </div>
              </div>
              <div class="mx-[4px] shrink-0 plus">
                <img :src="PlusPng" class="w-full h-full object-contain" />
              </div>
              <div
                class="rounded-[10px] w-[220px] py-[14px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img02Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#101010] text-[14px] ml-[10px] tit">TK广告消耗</div>
                </div>
                <div class="pl-[15px] mt-[4px] flex items-baseline money">
                  <div class="text-[#101010] font-bold text-[20px] m">
                    {{ getIntegerPart(totalInfo?.tkSpend) }}
                  </div>
                  <div class="text-[#101010] font-bold text-[14px] d"
                    >.{{ getDecimalPart(totalInfo?.tkSpend) }}</div
                  >
                </div>
                <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位$ </div>
              </div>
              <div class="mx-[4px] shrink-0 plus">
                <img :src="PlusPng" class="w-full h-full object-contain" />
              </div>

              <div
                class="rounded-[10px] w-[220px] py-[14px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img05Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#101010] text-[14px] ml-[10px] tit">单数</div>
                </div>
                <div class="pl-[15px] mt-[4px] flex items-baseline money">
                  <div class="text-[#101010] font-bold text-[20px] m">
                    {{ totalInfo?.thatdayPaidTotalNum }}
                  </div>
                </div>
                <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位-- </div>
              </div>
              <div class="mx-[4px] shrink-0 plus">
                <img :src="PlusPng" class="w-full h-full object-contain" />
              </div>

              <div
                class="rounded-[10px] w-[220px] py-[14px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img01Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#101010] text-[14px] ml-[10px] tit">平均广告费</div>
                </div>
                <div class="pl-[15px] mt-[4px] flex items-baseline money">
                  <div class="text-[#101010] font-bold text-[20px] m">{{
                    getIntegerPart(totalInfo?.avgSpend)
                  }}</div>
                  <div class="text-[#101010] font-bold text-[14px] d"
                    >.{{ getDecimalPart(totalInfo?.avgSpend) }}</div
                  >
                  <div
                    class="w-[2px] h-[11px] bg-[#101010] mx-[3px] line"
                    style="transform: rotate(15deg); transform-origin: center center"
                  ></div>
                  <div class="text-[#101010] font-bold text-[20px] m">{{
                    getIntegerPart(totalInfo?.avgSpendCny)
                  }}</div>
                  <div class="text-[#101010] font-bold text-[14px] d"
                    >.{{ getDecimalPart(totalInfo?.avgSpendCny) }}</div
                  >
                </div>

                <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位$/￥ </div>
              </div>
              <div class="mx-[4px] shrink-0 plus">
                <img :src="PlusPng" class="w-full h-full object-contain" />
              </div>

              <div
                class="rounded-[10px] w-[220px] py-[14px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img06Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#101010] text-[14px] ml-[10px] tit">平均营业额</div>
                </div>
                <div class="pl-[15px] mt-[4px] flex items-baseline money">
                  <div class="text-[#101010] font-bold text-[20px] m">
                    {{ getIntegerPart(totalInfo?.avgAmount) }}</div
                  >
                  <div class="text-[#101010] font-bold text-[14px] d"
                    >.{{ getDecimalPart(totalInfo?.avgAmount) }}</div
                  >
                  <div
                    class="w-[2px] h-[11px] bg-[#101010] mx-[3px] line"
                    style="transform: rotate(15deg); transform-origin: center center"
                  ></div>
                  <div class="text-[#101010] font-bold text-[20px] m">
                    {{ getIntegerPart(totalInfo?.avgAmountCny) }}</div
                  >
                  <div class="text-[#101010] font-bold text-[14px] d"
                    >.{{ getDecimalPart(totalInfo?.avgAmountCny) }}</div
                  >
                </div>

                <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位$/￥ </div>
              </div>
              <div class="mx-[4px] shrink-0 plus">
                <img :src="PlusPng" class="w-full h-full object-contain" />
              </div>

              <div
                class="rounded-[10px] w-[220px] py-[14px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img04Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#101010] text-[14px] ml-[10px] tit">广告ROI</div>
                </div>
                <div class="pl-[15px] mt-[4px] flex items-baseline money">
                  <div class="text-[#101010] font-bold text-[20px] m">
                    {{ getIntegerPart(totalInfo?.adRoi) }}
                  </div>
                  <div class="text-[#101010] font-bold text-[14px] d"
                    >.{{ getDecimalPart(totalInfo?.adRoi) }}</div
                  >
                </div>

                <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位-- </div>
              </div>
              <!-- <div class="mx-[4px] shrink-0 plus">
                <img :src="PlusPng" class="w-full h-full object-contain" />
              </div>

              <div
                class="rounded-[10px] w-[220px] py-[14px] px-[16px] shrink-0 total"
                :style="`border: 1px solid #f7f7fb;background:url('${Img04Png}') no-repeat right bottom,#fdfdfe;`"
              >
                <div class="flex items-center title">
                  <div class="text-[#101010] text-[14px] ml-[10px] tit">广告ROI</div>
                </div>
                <div class="pl-[15px] mt-[4px] flex items-baseline money">
                  <div class="text-[#101010] font-bold text-[20px] m">
                    {{ getIntegerPart(totalInfo?.adRoi) }}
                  </div>
                  <div class="text-[#101010] font-bold text-[14px] d">
                    .{{ getDecimalPart(totalInfo?.adRoi) }}
                  </div>
                </div>

                <div class="pl-[15px] text-[#999] text-[12px] unit"> 单位-- </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </ContentWrap>
    <ContentWrap :show-border="false">
      <el-table
        :data="tableData"
        class-name="myTable"
        v-loading="loading"
        :preserve-expanded-content="curStatus === 1 ? true : false"
        :row-key="id"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="expand" v-if="curStatus === 1">
          <template #default="props">
            <NestedTable :data="props.row.childrenDeptList" :row-key="id" />
          </template>
        </el-table-column>

        <el-table-column label="商品名称" prop="productName" width="80" v-if="curStatus === 3" />
        <el-table-column label="内部编码" prop="productId" width="80" v-if="curStatus === 3" />
        <el-table-column
          label="人员"
          prop="createName"
          width="80"
          v-if="curStatus === 0 || curStatus === 3"
        />
        <el-table-column label="部门" prop="name" width="120" v-if="curStatus === 1" />
        <el-table-column
          label="部门"
          prop="deptName"
          width="120"
          v-if="curStatus === 0 || curStatus === 3"
        />
        <el-table-column
          label="地区"
          prop="area"
          width="120"
          v-if="curStatus === 2 || curStatus === 0 || curStatus === 3"
          :filters="filterAreaList"
          :filter-method="filterHandler"
        >
          <template #filter-icon>
            <div class="ml-[10px] mt-[-8px]">
              <Icon icon="ep:filter" :size="12" color="#101010" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="营业额（外币/￥）"
          prop="thatdayTotalAmount"
          width="150"
          align="center"
        >
          <template #default="{ row }">
            <div v-if="curStatus === 1">
              {{
                `${row.deptRoiCost?.thatdayTotalAmount !== undefined ? row.deptRoiCost?.thatdayTotalAmount : 0}/${row.deptRoiCost?.thatdayTotalAmountCny !== undefined ? row.deptRoiCost?.thatdayTotalAmountCny : 0}`
              }}
            </div>
            <div v-else>
              {{
                `${row.thatdayTotalAmount !== undefined ? row.thatdayTotalAmount : 0}/${row.thatdayTotalAmountCny !== undefined ? row.thatdayTotalAmountCny : 0}`
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总广告花费（外币/￥）" prop="totalSpend" width="170" align="center">
          <template #default="{ row }">
            <div v-if="curStatus === 1">
              {{
                `${row.deptRoiCost?.totalSpend !== undefined ? row.deptRoiCost?.totalSpend : 0}/${row.deptRoiCost?.totalSpendCny != undefined ? row.deptRoiCost?.totalSpendCny : 0}`
              }}
            </div>
            <div v-else>
              {{
                `${row.totalSpend !== undefined ? row.totalSpend : 0}/${row.totalSpendCny != undefined ? row.totalSpendCny : 0}`
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="FB广告消耗（$）" prop="spend" align="center">
          <template #default="{ row }">
            <div v-if="curStatus === 1">
              {{ row.deptRoiCost?.spend !== undefined ? row.deptRoiCost?.spend : 0 }}
            </div>
            <div v-else>
              {{ row.spend !== undefined ? row.spend : 0 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="TK广告消耗（$）" prop="tkSpend" align="center">
          <template #default="{ row }">
            <div v-if="curStatus === 1">
              {{ row.deptRoiCost?.tkSpend !== undefined ? row.deptRoiCost?.tkSpend : 0 }}
            </div>
            <div v-else>
              {{ row.tkSpend !== undefined ? row.tkSpend : 0 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单数" prop="thatdayPaidTotalNum" width="80" align="center">
          <template #default="{ row }">
            <div v-if="curStatus === 1">
              {{
                row.deptRoiCost?.thatdayPaidTotalNum !== undefined
                  ? row.deptRoiCost?.thatdayPaidTotalNum
                  : 0
              }}
            </div>
            <div v-else>
              {{ row.thatdayPaidTotalNum !== undefined ? row.thatdayPaidTotalNum : 0 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="平均广告费（$/￥）" prop="name" width="170" align="center">
          <template #default="{ row }">
            <div v-if="curStatus === 1">
              {{
                `${row.deptRoiCost?.avgSpend !== undefined ? row.deptRoiCost?.avgSpend : 0}/${row.deptRoiCost?.avgSpendCny !== undefined ? row.deptRoiCost?.avgSpendCny : 0}`
              }}
            </div>
            <div v-else>
              {{
                `${row.avgSpend !== undefined ? row.avgSpend : 0}/${row.avgSpendCny !== undefined ? row.avgSpendCny : 0}`
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="平均营业额（$/￥）" prop="name" width="170" align="center">
          <template #default="{ row }">
            <div v-if="curStatus === 1">
              {{
                `${row.deptRoiCost?.avgAmount !== undefined ? row.deptRoiCost?.avgAmount : 0}/${row.deptRoiCost?.avgAmountCny !== undefined ? row.deptRoiCost?.avgAmountCny : 0}`
              }}
            </div>
            <div v-else>
              {{
                `${row.avgAmount !== undefined ? row.avgAmount : 0}/${row.avgAmountCny !== undefined ? row.avgAmountCny : 0}`
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="广告ROI" prop="adRoi" align="center">
          <template #default="{ row }">
            <div v-if="curStatus === 1">
              {{ row.deptRoiCost?.adRoi !== undefined ? row.deptRoiCost?.adRoi : 0 }}
            </div>
            <div v-else>
              {{ row.adRoi !== undefined ? row.adRoi : 0 }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </ContentWrap>
  </div>
</template>
<script setup lang="ts">
import type { TableColumnCtx, TableInstance } from 'element-plus'
import { getSimpleDeptList } from '@/api/system/dept'
import { getUserPage } from '@/api/system/user'
import { getUserPageNew } from '@/api/member/user'
import { getGlobeState } from '@/api/publicInterf'
import OrderStatusMenu from '@/views/trade/components/OrderStatusMenu.vue'
import type { TradeOrderQueryVO } from '@/api/mall/trade/order'
import RefreshPng from '@/assets/ad/refresh.png'
import EqPng from '@/assets/ad/eq.png'
import PlusPng from '@/assets/ad/plus.png'
import Img03Png from '@/assets/ad/img03.png'
import Img02Png from '@/assets/ad/img02.png'
import Img05Png from '@/assets/ad/img05.png'
import Img01Png from '@/assets/ad/img01.png'
import Img06Png from '@/assets/ad/img06.png'
import Img04Png from '@/assets/ad/img04.png'
import { RoiApi } from '@/api/ad/roi'
import NestedTable from './components/NestedTable.vue'
import { RoiTotalCostVO } from '@/api/ad/roi/types'
import { getIntegerPart, getDecimalPart, buildTree } from '@/utils/index'
import { EverdayCostApi } from '@/api/ad/everdaycost'
import { usePageLoading } from '@/hooks/web/usePageLoading'
import download from '@/utils/download'
import { number } from 'vue-types'
const { loadStart, loadDone } = usePageLoading()
import dayjs from 'dayjs'

interface QueryParams {
  pageNo: number // 页数
  pageSize: number // 每页显示数量
  status: string | undefined // 默认订单状态
  deptId: string | undefined // 默认部门id
  createName: string | undefined // 默认创建人
  startDate: string | undefined // 默认开始时间
  endDate: string | undefined // 默认结束时间
  productName: string | undefined // 默认商品信息
  type: number | null // 修改为 number | null
}

const message = useMessage()

const isDragging = ref(false)
const startX = ref(0)
const translateX = ref(0)
const scrollLeft = ref(0)
const scrollRightRef = ref<HTMLElement | null>(null)
const scrollboxRef = ref<HTMLElement | null>(null)
const minTranslateX = ref(0)

const curStatus = ref(0)

const depatList = ref([])

const areaList = ref([])

const filterAreaList = ref([])

const createNameList = ref([])

const tableData = ref([])

const total = ref(0)

const loading = ref(false)

const totalInfo = ref<RoiTotalCostVO>({
  adRoi: 0,
  avgAmount: 0,
  avgAmountCny: 0,
  avgSpend: 0,
  avgSpendCny: 0,
  spend: 0,
  thatdayPaidTotalNum: 0,
  thatdayTotalAmount: 0,
  thatdayTotalAmountCny: 0,
  tkSpend: 0,
  totalSpend: 0,
  totalSpendCny: 0
})

// 定义初始化查询参数
const initQuery: QueryParams = {
  pageNo: 1, // 页数
  pageSize: 10, // 每页显示数量
  status: undefined, // 默认订单状态
  deptId: undefined, // 默认部门id
  createName: undefined, // 默认创建人
  startDate: undefined, // 默认开始时间
  endDate: undefined, // 默认结束时间
  productName: undefined, // 默认商品信息
  type: null // 默认订单类型
}

// 使用 initQuery 初始化 queryParams
const queryParams = ref({ 
  ...initQuery ,
  startDate:dayjs().startOf('day').format('YYYY-MM-DD'), 
  endDate: dayjs().endOf('day').format('YYYY-MM-DD')
})

const startDrag = (event: MouseEvent) => {
  if (minTranslateX.value > 0) return
  isDragging.value = true
  startX.value = event.pageX
}

const stopDrag = () => {
  isDragging.value = false
}

const doDrag = (event: MouseEvent) => {
  if (!isDragging.value || minTranslateX.value > 0) return
  event.preventDefault()
  const x = event.pageX
  let walk = x - startX.value // 计算移动的距离
  translateX.value += walk // 更新位移
  if (translateX.value > 0) translateX.value = 0
  if (translateX.value < minTranslateX.value) translateX.value = minTranslateX.value
  startX.value = x // 更新起始位置
}

const searchList = ref<TradeOrderQueryVO[]>([])

const orderStatusList = [
  {
    label: '按成员',
    value: 0
  },
  {
    label: '按部门',
    value: 1
  },
  {
    label: '按地区',
    value: 2
  },
  {
    label: '按商品',
    value: 3
  }
]
const handleOrderStatus = (status: number) => {
  queryParams.value = { ...initQuery }
  curStatus.value = status
}


const handleChange = (val) => {
  if (val.form.deptId) {
    queryParams.value.deptId = val.form.deptId
  }
}

watch(
  () => queryParams.value.deptId,
  () => {
    // if (curStatus.value === 1) {
    // form.value.
    getCreateNameList()
    // }
  }
)

const getList = async () => {
  if (loading.value) return
  loading.value = true
  try {
    let data
    if (curStatus.value === 0) {
      data = await RoiApi.getCreaterRoiPage(queryParams.value)
    } else if (curStatus.value === 1) {
      data = await RoiApi.getDeptRoiPage(queryParams.value)
    } else if (curStatus.value === 2) {
      data = await RoiApi.getAreaRoiPage(queryParams.value)
    } else if (curStatus.value === 3) {
      data = await RoiApi.getProductRoiPage(queryParams.value)
    }
    if (curStatus.value !== 1) {
      tableData.value = data.list
      total.value = data.total
    } else {
      tableData.value = data
    }
  } finally {
    loading.value = false
  }
}

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  if (val.orderTime && val.orderTime.length) {
    val.startDate = val.orderTime[0]
    val.endDate = val.orderTime[1]
  }
  delete val.orderTime
  queryParams.value = { ...initQuery, ...val }
  getList()
  getTotalInfo()
}
/**
 * 汇总信息查询
 */
const getTotalInfo = async () => {
  const queryCondition = JSON.parse(JSON.stringify(queryParams.value))
  delete queryCondition.pageNo
  delete queryCondition.pageSize
  queryCondition.type = curStatus.value + 1
  const res = await RoiApi.getRoiTotalCost(queryCondition)
  totalInfo.value = res
}
//查询部门人员
const getCreateNameList = async () => {
  const res = await getUserPageNew({ pageNo: 1, pageSize: 99, deptId: queryParams.value.deptId })
  createNameList.value = res.map((item) => {
    return {
      label: item.nickname,
      value: item.nickname
    }
  })
  searchList.value.map((item) => {
    if (item.code === 'createName') {
      item.options = createNameList.value
    }
  })
}

watch(
  () => curStatus.value,
  () => {
    if (curStatus.value === 0) {
      searchList.value = [
        {
          label: '部门',
          code: 'deptId',
          type: 'treeSelect',
          options: depatList.value
        },
        {
          label: '人员',
          code: 'createName',
          type: 'select',
          options: createNameList.value
        },
        {
          label: '投放时间',
          code: 'orderTime',
          type: 'dateRange',
          default:[queryParams.value.startDate,queryParams.value.endDate],
        }
      ]
    } else if (curStatus.value === 1) {
      searchList.value = [
        {
          label: '部门',
          code: 'deptId',
          type: 'treeSelect',
          options: depatList.value
        },
        {
          label: '投放时间',
          code: 'orderTime',
          type: 'dateRange',
          default:[queryParams.value.startDate,queryParams.value.endDate],
        }
      ]
    } else if (curStatus.value === 2) {
      searchList.value = [
        {
          label: '地区',
          code: 'area',
          type: 'select',
          options: areaList.value
        },
        {
          label: '投放时间',
          code: 'orderTime',
          type: 'dateRange',
          default:[queryParams.value.startDate,queryParams.value.endDate],
        }
      ]
    } else if (curStatus.value === 3) {
      searchList.value = [
        {
          label: '商品信息',
          code: 'productName',
          type: 'input'
        },
        {
          label: '投放时间',
          code: 'orderTime',
          type: 'dateRange',
          default:[queryParams.value.startDate,queryParams.value.endDate],
        }
      ]
    }
    if (!loading.value) {
      getList()
      getTotalInfo()
    }
  },
  { immediate: true }
)

/**
 * 清除默认时间
*/
const clearDefaultTime = () =>{
  searchList.value.forEach(item => {
    if (item.code === 'orderTime') {
      item.default = []
    }
  })
}

/**地区筛选*/
const filterHandler = (value: string, row: any, column: TableColumnCtx<any>) => {
  const property = column['property']
  return row[property] === value
}

const init = async () => {
  const [depatRes, areaRes] = await Promise.all([
    getSimpleDeptList(),
    getGlobeState({ pageNum: 1, pageSize: 100 }),
    getCreateNameList()
  ])
  depatList.value = buildTree(depatRes)
  searchList.value.map((item) => {
    if (item.code === 'deptId') {
      item.options = depatList.value
    }
  })
  filterAreaList.value = areaRes.map((item) => {
    return {
      text: item.stateName,
      value: item.stateName
    }
  })
  areaList.value = areaRes.map((item) => {
    return {
      label: item.stateName,
      value: item.stateName
    }
  })
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    loadStart()
    queryParams.value.type = curStatus.value + 1
    const data = await RoiApi.exportRoi(queryParams.value)
    download.excel(data, '广告Roi.xls')
  } catch {
  } finally {
    loadDone()
  }
}

onMounted(() => {
  init()
  nextTick(async () => {
    if (scrollRightRef.value && scrollboxRef.value) {
      setTimeout(() => {
        minTranslateX.value =
          scrollboxRef.value?.offsetWidth - (scrollRightRef.value?.offsetWidth + 60)
      }, 400)
    }
  })
})
</script>
<style lang="scss" scoped>
.scrollbox {
  overflow-x: auto; /* 允许横向滚动 */
}
:deep(.el-table.myTable thead tr) {
  background-color: #f7f7fb;
  border-radius: 4px;
  overflow: hidden;
}
:deep(.el-table.myTable thead th.el-table__cell) {
  background-color: #f7f7fb;
}
:deep(.el-table.nestedTable thead) {
  display: none !important;
}
:deep(.el-table.nestedTable .el-table__inner-wrapper::before) {
  display: none !important;
}
:deep(.el-table.nestedTable td.el-table__cell) {
  // border-bottom: 0px !important;
  border-bottom: 1px solid #f1f1f1;
}
:deep(.el-table.nestedTable td.el-table__cell) {
  // box-shadow: 0px 2px 1px rgba(55, 33, 255, 0.05) !important;
}
</style>
